<template>
  <div class="bubble-content" @click="emit('onClickBubble', [2, keyIndex])">
    <div class="title-text">{{ bubbleData.value }}</div>
    <img :src="bubbleData.type ? bubbleY : bubble" alt="" />
  </div>
</template>

<script lang="ts" setup>
import bubbleY from '@/assets/bubbleY.png'
import bubble from '@/assets/bubble.png'

interface bubbleDataType {
  value: string
  top: string
  left: string
  type: boolean
}
interface PropsType {
  bubbleData: bubbleDataType
  keyIndex: number
}

const emit = defineEmits(['onClickBubble'])

const {bubbleData} = defineProps<PropsType>()
const top = bubbleData.top
const left = bubbleData.left
</script>

<style lang="scss" scoped>
@keyframes slidein {
  0% {
    transform: translateY(1%);
  }

  50% {
    transform: translateY(20%);
  }

  100% {
    transform: translateY(1%);
  }
}

.bubble-content {
  position: absolute;
  top: v-bind(top);
  left: v-bind(left);
  transform: translateY(0%);
  animation-name: slidein;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  img {
    height: 46px;
    width: 46px;
  }
}

.title-text {
  position: absolute;
  top: -15px;
  font-size: 11px;
  color: #105b50;
}
</style>
